<template>
	<view class="content">
		<!-- 返回按钮 -->

		<view class="banner-btn" @click="gotoHome">
			<image src="../../static/commodity/common2.png" mode=""></image>
		</view>


		<!-- 轮播图的区域 -->
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
				<swiper-item v-for="(item,index) in spimgs" :key="index">

					<image :src="item"></image>

				</swiper-item>

			</swiper>
		</view>

		<!-- 规格型号 -->
		<view class="area">
			<view class="area-money">￥{{spdata.showPrice}}</view>
			<view class="area-title">{{spdata.commodityName}}</view>
			<view class="area-mo">
				<view class="area-mo1">模型：实物</view>
				<view class="area-mo2">月销量8500</view>
			</view>
		</view>

		<view class="specification">
			<view class="specification-left" @tap="tapPopup">已选</view>
			<!-- <view class="specification-centent">
			</view> -->
			<view class="specification-right" @click="showShopDialog">...</view>
		</view>
		<view class="popup" v-show="show">
			<view class="popup-info">
				<view class="popup-title">
					<view class="popup-title1">
						<image src="../../static/commodity/common12.png" mode=""></image>
					</view>
					<view class="popup-title2">
						<view class="popup-title2-top">
							<view class="popup-title2-top1">￥{{spdata.showPrice}}</view>
							<!-- ="../../static/commodity/common16.png -->
							<view class="popup-title2-top2" @click="cancel"><image src="../../static/commodity/common16.png" mode=""></image></view>
						</view>
						<view class="popup-title2-ku">库存 {{spdata.stock}} 件</view>
						<view class="popup-title2-gg">已选 海蓝色 | 256GB | 公开版 | 1件</view>
					</view>
				</view>
				<view class="popup-content" v-for="(item3, index) in guige">
					<view class="popup-content1">
						<view class="popup-content1-wg">{{item3.optionName}}</view>
						<view class="popup-content1-ys" @click="color(item4)" v-for="(item4,index) in item3.attributeNames" :key="index">{{item4}}</view>
						<!-- 外观海蓝色 银色 金色 石墨色 -->
					</view>
					<view class="popup-content1">
						<view class="popup-content1-wg">版本</view>
						<view class="popup-content1-ys">128GB 256GB</view>
					</view>
					<view class="popup-content1">
						<view class="popup-content1-wg">购买方式</view>
						<view class="popup-content1-ys">公开版 airpod套餐</view>
					</view>
					
					<view class="popup-content2">
						<view class="popup-content2-wg">购买数量</view>
						<!-- <MyNum :changenum="changenum" @buynum="buynum" class="hidden">9</MyNum> -->
						<view class="popup-content2-ys">
							<!-- <uni-number-box @change="bindChange" :min="1" :max="20" :value="numberValue" ></uni-number-box> -->
							<!-- <uni-section :title="'绑定value的方式 : '+ numberValue" type="line"/> -->
									<uni-number-box :value="numberValue" @change="change" />
							</view>
					</view>
					
				</view>
				<view class="popup-btn">
					<view @tap="cancel" class="prop-btn1">
						取消
					</view>
					<view @tap="affirm" class="prop-btn2">
						确认
					</view>
				</view>
			</view>
		</view>
		<view class="specification2">
			<view class="specification3">
				<view class="specification2-left">发货</view>
				<view class="specification2-centent">广州| 邮费。包邮</view>
			</view>
			<view class="specification2-right">...</view>
		</view>
		<!-- <my-goods @close="closeShopDialog" class="hidden" :class="{show:shopFlag}" @value="value"></my-goods> -->
		<!-- 评论 -->
		<view class="comment">
			<view class="comment-title">
				<view class="comment-title1" @click="morespl">评论（28439）</view>
				<view class="comment-title2" @click="goWrite">写评论</view>
			</view>
			<view class="comment-content" v-for="(item,index) in WaresIdComment">
				<view class="comment-content-name">
					<view class="comment-content-name1">
						<image src="../../static/home/ss-imgs5.png" mode=""></image>
					</view>
					<view class="comment-content-name12">{{item.nickName}}</view>
					<view class="comment-content-name2">
						<image src="../../static/commodity/common3.png" mode=""></image>
						<image src="../../static/commodity/common3.png" mode=""></image>
						<image src="../../static/commodity/common3.png" mode=""></image>
						<image src="../../static/commodity/common4.png" mode=""></image>
						<image src="../../static/commodity/common5.png" mode=""></image>
					</view>
					<view class="comment-content-name3">...</view>
				</view>
				<view class="comment-content-content">
					{{item.content}}
				</view>
				<view class="comment-content-foot">
					<view class="comment-content-foot1">{{item.time}}</view>
					<!--  v-if="item.clickType == 0" -->
					<view class="comment-content-foot2" @click="dianZanshangpin" v-if="item.clickType == 0">
						<image src="../../static/commodity/common6.png" mode=""></image>{{item.clickNum}}
					</view>
					<!-- v-if="item.clickType == 1" -->
					<view class="comment-content-foot2" @click="dianZanshangpin" v-if="item.clickType == 1">
						<image src="../../static/commodity/common7.png" mode=""></image>{{item.clickNum}}
					</view>
				</view>
			</view>


			<view class="comment-bottom" @click="loading">
				加载更多
			</view>


		</view>
		<!-- 商品介绍 -->
		<view class="particulars">
			<view class="particulars-title">商品介绍</view>
			<view class="particulars-content">
				<view class="particulars-content-title">
					这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍
				</view>
				<view class="particulars-content-imgs">
					<image src="../../static/commodity/common8.png" mode=""></image>
				</view>
				<view class="particulars-content-imgs">
					<image src="../../static/commodity/common8.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-btn">

			<view class="bottom-btn-dp" @click="dianPu()">
				<image src="../../static/commodity/common9.png" mode=""></image>店铺
			</view>
			<view class="bottom-btn-gwc" @click="gouWuche()">
				<!-- <uni-badge :text="6" size="small" absolute="rightTop" type="error" class="huibiao"></uni-badge> -->
				<text class="shuzihuibiao" v-if="numberValue >= 1">{{numberValue}}</text>
				<image src="../../static/commodity/common10.png" mode=""></image>
				<text>购物车</text>
			</view>
			<view class="bottom-btn-sc" @click="shouCang2()">
				
				<image src="../../static/commodity/common15.png" mode="" v-show="shoucangtu2"></image>
				<image src="../../static/commodity/common11.png" mode="" v-show="!shoucangtu2"></image>收藏
			</view>
			<!-- @click="showShopDialog" @click="liji" -->
			<view class="bottom-btn-jiaru" @tap="tapPopup">
				加入购物车
			</view>
			<view class="bottom-btn-liji" @tap="tapPopup">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	import MyNum from '../../components/MyNum.vue'
	export default {
		data() {
			return {
				skuId:'',//skuid
				skuName:'',//sul名称
				skuImg:'',//sku图片
				show: false,// 弹框默认为不显示
				guige: '', //商品规格列表
				houColor:'',
				spimgs: '',
				spimgs2:'',
				spdata: '', //接收商品数据
				// commodityImgs,// 商品详情拿到的照片
				commodityId: '', // 商品id
				shoucangtu2: false, //收藏点击切换
				serviceFlag: false,
				evaluateId: '', //评价ID
				evaluateInfo: '', // 评论信息
				serviceFlag: false,
				evaluateType: '好评', // 评价类型（好评、差评
				shopFlag: false,
				shopnum:1,
				changenum:2,
				numberValue: 0,
				// numberValue: 3,
				info: [{
						id: '1',
						// image: '../../static/commodity/common1.png',
						imgs: '../../static/commodity/common1.png'
					},
					{
						id: '2',
						imgs: '../../static/commodity/common1.png'
					},
					{
						id: '3',
						// image: '../../static/commodity/common1.png',
						imgs: '../../static/commodity/common1.png'
					}

				],
				waresId: '',
				WaresIdDetail: [], //商品详情  
				WaresIdComment: [], //商品评论
				deslist: '', //数据
				counter: 0, //每点一次加载更多+1
				pageStart: 0,
				pageSize: 5 //第一次显示5条，每加载一次原来基础上多五条
			}

		},
		onLoad(options) {
			this.waresId = options.waresId
			this.commodityId = options.commodityId
			console.log(this.commodityId, '哒哒哒哒哒')
			
			this.numberLikes() // 查询点赞数量
			// 商品接口***********
			this.shangPinliebiao() // 商品的评论列表
			this.xiangQing()
			this.leiMu()
			this.specificationLlist()
			this.chaCar()
		},

		methods: {
			// 点击拿到颜色分类点击
			color(name){
				this.houColor = name
				console.log('点击了什么颜色' + this.houColor)
				this.chaSku()
			},
			change(value) {
				console.log(value)
							this.numberValue = value
							console.log(this.numberValue)
							this.carNumber()
						},
					
			buynum(data){
				this.shopnum=data;
			},
			tapPopup() {
				this.show = true;
			},
			// 点击弹窗取消
			cancel() {
				this.show = false;
			},
			// 点击弹窗确认
			affirm() {
				this.show = false;
				// this.juBaoping()
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mallOrders/cartAdd',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						skuId:that.skuId,
						num:that.numberValue
					},
					afterAjax: (res) => {
						if (res.code !== 200) {
							console.log(res.data, '商品添加购物车错误')
						}
						if (res.code == 200) {
							console.log('商品添加购物车通了')
							uni.navigateTo({
								// url:'../commodity-details/indet2?numberValue=' + this.numberValue + '&houColor=' + this.houColor
								url:'cart/cart?numberValue=' + this.numberValue + '&houColor=' + this.houColor
							})
						}
					}
				})
				
			},
			gotoHome() {
				uni.switchTab({
					url: '../home/home'
				})
			},
			goWrite() {
				uni.navigateTo({
					url: './write-comment?commodityId=' + this.commodityId
				})
			},
			// 跳转评论列表页面
			morespl() {
				uni.navigateTo({
					url: './comment2?waresId=' + this.waresId
				})
			},
			// 点击立即购买
			liji() {
				uni.navigateTo({
					url: './indet?waresId=' + this.waresId
				})
			},
			// 根据规格名称查询sku信息
			chaSku() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mall/getSkuMsgByName',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						skuName:that.houColor,
						commodityId:that.commodityId
					},
					afterAjax: (res) => {
						if (res.code !== 200) {
							console.log(res.data, '查询sku错误')
						}
						if (res.code == 200) {
							console.log('查询sku通了')
							that.skuId = res.data.skuId
							console.log(that.skuId,'中国队中国队')
						}
					}
				})
			},
			// 查询当前登录用户的购物车
			chaCar() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mallOrders/getCartList',
					header: {
						'token': uni.getStorageSync('token')
					},
					afterAjax: (res) => {
						if (res.code !== 200) {
							console.log(res.data, '查询当前登录用户的购物车错误')
						}
						if (res.code == 200) {
							console.log('查询当前登录用户的购物车通了')
						}
						console.log(res,'------------')
					}
				})
			},	
		
			// 购物车数量
			carNumber() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mallOrders/updateCartNum',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						csId:that.commodityId,
						num:that.numberValue
					},
					afterAjax: (res) => {
						if (res.code !== 200) {
							console.log(res.data, '购物车数量错误')
						}
						if (res.code == 200) {
							console.log('购物车数量通了')
						}
					}
				})
			},
		
			// 商品规格列表
			specificationLlist() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mall/CommodityOptions',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						commodityId: that.commodityId
					},
					afterAjax: (res) => {
						console.log(res, '新增规格列表*接口')
						if (res.code !== 200) {
							console.log(res.data, '新增*规格列表接口错误')
						}
						if (res.code == 200) {
							that.guige = res.data
							console.log(that.guige,'新增规格列表通了')
							uni.showToast({
								title: '点击*规格列表',
								icon: 'none'
							})
						}
					}
				})
			},
			// 商品类目
			leiMu() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mall/getCategoryList',
					header: {
						'token': uni.getStorageSync('token')
					},
					// data: {
					// 	commodityId: this.waresId,
					// },
					afterAjax: (res) => {
						console.log(res, '类目接口')
						if (res.code !== 200) {
							console.log(res.data, '类目接口错误')
						}
						if (res.code == 200) {
							console.log('类目通了')
							uni.showToast({
								title: '点击*类目',
								icon: 'none'
							})
						}
					}
				})
			},
			// 商品详情数据接口
			xiangQing() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mall/commodityDetail',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						commodityId: that.commodityId,
					},
					afterAjax: (res) => {
						console.log(res, '新增商品详情数据接口接口')
						if (res.code !== 200) {
							console.log(res.data, '新增***商品详情数据接口***接口错误')
						}
						if (res.code == 200) {
							console.log(res.data.commodityImgs[0], '--------------------------------')
							console.log(res.data.commodityImgs, '噢噢噢噢噢噢噢噢')
							that.spimgs = res.data.commodityImgs
							that.spimgs2 = res.data.commodityImgs[0]
							that.spdata = res.data
							// that.commodityImgs = res.data[0].commodityImgs
							uni.showToast({
								title: '点击***商品详情数据接口***',
								icon: 'none'
							})
						}
					}
				})
			},
			// ***商品的评论列表***Specification list
			shangPinliebiao() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mall/commodityEvaluate',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						commodityId: this.waresId,
						pageNum: '5',
						pageSize: '5'
					},
					afterAjax: (res) => {
						console.log(res, '新增***商品的评论列表***接口')
						if (res.code !== 200) {
							console.log(res.data, '新增***商品的评论列表***接口错误')
						}
						if (res.code == 200) {
							console.log('新增***商品的评论列表***通了')
							uni.showToast({
								title: '点击***商品的评论列表***',
								icon: 'none'
							})
						}
					}
				})
			},

			//寄售的接口后期删除***********************************************************
			// 查询点赞数量
			numberLikes() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mall/evaluateLikeCount',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						evaluateId: '555', // 评论ID
					},
					afterAjax: (res) => {
						console.log(res, '查询点赞数量接口')
						if (res.code !== 200) {
							uni.showToast({
								// title: res.msg,
								title: '查询点赞数量，稍后重试',
								icon: 'none'
							})
							console.log(res.msg, '查询点赞数量拿到')
						}
						if (res.code == 200) {
							console.log('查询点赞数量通了')
							// uni.showToast({
							// 	title: '已点赞',
							// 	icon: 'none'
							// })
						}

					}
				})
			},

			// 商品点赞详情
			dianZanshangpin() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mall/evaluateLikeAdd',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						evaluateId: this.evaluateId, // 评价ID
					},
					afterAjax: (res) => {
						console.log(res, '商品点赞详情接口')
						if (res.code !== 200) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							console.log(res.msg, '商品点赞详情拿到')
						}
						if (res.code == 200) {
							console.log('商品点赞详情通了')
							uni.showToast({
								title: '已点赞',
								icon: 'none'
							})
						}

					}
				})
			},
			// 新增/删除商品收藏
			shouCang2() {
				this.shoucangtu2 = !this.shoucangtu2
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mall/collectionAdd',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						commodityId:that.commodityId,
						operationType:1
					},
				afterAjax: (res) => {
					if (res.code !== 200) {
						console.log(res.data, '新增/删除商品收藏错误')
					}
					if (res.code == 200) {
						console.log('新增/删除商品收藏通了')
					}
				}
				})
			},

			//获取选中完的商品属性
			value(data) {
				console.log(data);
				this.selectAttr = data.text;
				// this.curprice=data.price
			},
			//显示购买弹窗
			showShopDialog() {
				this.shopFlag = true
			},
			closeShopDialog() {
				this.shopFlag = false
			},
		}
	}
</script>

<style lang="scss">
	.content {
		margin: 0 !important;
		padding: 0 !important;
		background-color: #f5f5f5;
		height: 100%;

		.hidden {
			display: none;
		}

		.show {
			display: block;
		}

		.banner-btn {
			position: absolute;
			z-index: 999;
			margin: 25rpx;
			width: 54rpx;
			height: 54rpx;
			margin: 25rpx;
			padding-top: 30rpx;
			padding-left: 30rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		swiper {
			height: 750rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.area {
			background-color: #FFFFFF;
			margin: 14rpx;
			border-radius: 14rpx;
			display: flex;
			flex-direction: column;
			justify-content: left;

			.area-money {
				font-size: 25rpx;
				font-weight: 600;
				margin: 25rpx;
				color: #eb3e3e;
			}

			.area-title {
				font-size: 28rpx;
				margin: 14rpx 25rpx;
				font-weight: 700;
			}

			.area-mo {
				font-size: 21rpx;
				color: #7f7b6f;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 14rpx 25rpx;
			}
		}

		.specification {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 25rpx;
			border-radius: 14rpx;

			.specification-left {
				font-size: 25rpx;
				font-weight: 600;
				color: #21201d;
			}

			.specification-centent,
			.specification-right {
				font-size: 21rpx;
				color: #9d987e;
			}
		}

		.specification2 {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 25rpx;
			border-radius: 14rpx;

			.specification3 {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
			}

			.specification2-left {
				font-size: 25rpx;
				font-weight: 600;
				color: #21201d;
				margin-right: 36.23rpx;
			}

			.specification2-centent,
			.specification2-right {
				font-size: 21rpx;
				color: #9d987e;
			}
		}

		.comment {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 25rpx;

			.comment-title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.comment-title1 {
					font-size: 28rpx;
					font-weight: 600;
				}

				.comment-title2 {
					font-size: 28rpx;
					color: #2b9cef;
					font-weight: 600;
				}
			}

			.comment-content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 28rpx 25rpx;

				.comment-content-name {
					display: flex;
					flex-direction: row;
					justify-content: left;

					.comment-content-name1 {
						width: 57rpx;
						height: 57rpx;
						margin-right: 25rpx;

						image {
							max-width: 100%;
							max-height: 100%;
						}
					}

					.comment-content-name12 {
						font-size: 28rpx;
						color: #21201d;
						font-weight: 600;
					}

					.comment-content-name2 {
						display: flex;
						flex-direction: row;
						justify-content: left;
						width: 128rpx;
						height: 30rpx;
						margin-right: 200rpx;

						image {
							max-width: 100%;
							max-height: 100%;

						}
					}


					.comment-content-name3 {
						margin: 0 25rpx;
					}
				}

				.comment-content-content {
					font-size: 25rpx;
					margin: 30rpx;
				}

				.comment-content-foot {
					margin: 43rpx;
					font-size: 21rpx;
					color: #88836d;
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					.comment-content-foot1 {
						font-size: 21rpx;
						color: #9c977d;
					}

					.comment-content-foot2 {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						width: 110rpx;
						height: 28rpx;
						margin: 0 25rpx;

						image {
							max-width: 30%;
							max-height: 100%;
							margin-right: 25rpx;

						}
					}
				}
			}
		}

		.comment-bottom {
			font-size: 25rpx;
			color: #2b9cef;
			text-align: center;
			font-weight: 600;
		}

		// 商品详情
		.particulars {
			display: flex;
			flex-direction: column;
			justify-content: left;
			margin: 25rpx;
			background-color: #FFFFFF;

			.particulars-title {
				font-size: 28rpx;
				font-weight: 700;
				margin: 21rpx 25rpx;
			}

			.particulars-content {
				margin: 21rpx 0;
				font-size: 25rpx;

				.particulars-content-title {
					margin: 12rpx 0;
				}

				.particulars-content-imgs {
					width: 655rpx;
					height: 347rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		// 底部按钮
		.bottom-btn {
			position: fixed;
			bottom: 0;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			height: 105rpx;
			padding: 25rpx;

			.bottom-btn-dp,
			.bottom-btn-gwc,
			.bottom-btn-sc {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 94rpx;
				height: 105rpx;
				font-size: 21rpx;
				margin-bottom: 7rpx;

				.huibiao {
					position: absolute;
					// top: 0;
					z-index: 999;
				}

				image {
					max-width: 60%;
					max-height: 60%;


				}
			}

			.bottom-btn-jiaru {
				width: 202rpx;
				height: 72rpx;
				background-color: #21202d;
				color: #fcda22;
				text-align: center;
				line-height: 72rpx;
				align-items: center;
				border-radius: 39rpx;
				margin: 0 7rpx;
				font-size: 25rpx;
				font-weight: 600;
				margin-top: 16rpx;
			}

			.bottom-btn-liji {
				width: 202rpx;
				height: 72rpx;
				color: #21202d;
				background-color: #fcda22;
				text-align: center;
				line-height: 72rpx;
				align-items: center;
				border-radius: 39rpx;
				margin: 0 7rpx;
				font-size: 25rpx;
				font-weight: 600;
				margin-top: 16rpx;
			}

		}

		.popup {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 9998;

			.popup-info {
				position: fixed;
				width: 750rpx;
				height: 77%;
				bottom: 0;
				left: 0;
				// transform: translate(-50%,-50%);
				font-size: 30upx;
				border-radius: 36.23rpx 36.23rpx 0 0;
				background-color: #fff;
				z-index: 9999;

				.popup-title {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					margin: 43.47rpx 21.73rpx;

					.popup-title1 {
						width: 206.52rpx;
						height: 206.52rpx;
						// margin-right: 16.23rpx;
						image {
							max-width: 100%;
							max-height: 100%;
						}
					}
					.popup-title2 {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						.popup-title2-top {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							.popup-title2-top1 {
								font-size: 25.36rpx;
								color: #eb3e3e;
								font-weight: 600;
							}
							.popup-title2-top2 {
								width: 43.47rpx;
								height: 43.47rpx;
								image {
									max-width: 100%;
									max-height: 100%;
								}
							}
						}
						.popup-title2-ku {
							font-size: 21.73rpx;
							color: #6d6a60;
						}
						.popup-title2-gg {
							margin-top: 57.97rpx;
							font-size: 12rpx;
							color: #6d6a60;
						}
					}
				}
				.popup-content {
					margin: 21.73rpx;
					.popup-content1 {
						margin-bottom: 48.84rpx;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						.popup-content1-wg {
							color: #21201d;
							font-size: 25.36rpx;
							font-weight: 600;
						}
						.popup-content1-ys {
							font-size: 21.73rpx;
							color: #6d6a60;
							font-size: 21.73rpx;
							margin-top: 25.36rpx;
						}
					}
					.popup-content2 {
						margin-bottom: 48.84rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						.popup-content2-wg {
							margin-top: 40rpx;
							color: #21201d;
							font-size: 25.36rpx;
							font-weight: 600;
						}
						.popup-content2-ys {
							font-size: 21.73rpx;
							color: #6d6a60;
							font-size: 21.73rpx;
							margin-top: 25.36rpx;
						}
					}
				}

				.popup-btn {
					margin: 0 25.36rpx;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					.prop-btn1 {
						border-radius: 39.85rpx;
						background-color: #21202d;
						color: #FCDA22;
						padding: 21.73rpx 146.88rpx;
						font-size: 25.36rpx;
						font-weight: 600;
						margin-right: 18.11rpx;
						
					}
					.prop-btn2 {
						border-radius: 39.85rpx;
						background-color: #FCDA22;
						color:#21202d;
						padding: 21.73rpx 146.88rpx;
						font-size: 25.36rpx;
						font-weight: 600;
					}
				}
			}
		}
	.hidden {
			display: block;
		}
		.shuzihuibiao {
			position: fixed;
			z-index: 9999;
			width: 40rpx;
			margin-left: 30rpx;
			padding: 3rpx;
			margin-top: -10rpx;
			border-radius: 20rpx;
			height: 38rpx;
			background-color: #FF6034;
			color: #fff;
			font-size: 21.73rpx;
			text-align: center;
			align-items: center;
		}
	}
</style>
